<!--
 * @Author: byron
 * @Date: 2021-09-23 20:49:00
 * @LastEditTime: 2021-10-05 15:21:46
-->
<template>
    <div class="songs">
        <Tabs
            :tabs="tabs"
            offset="right"
            v-model="activeTabIndex"
            @tabChange="getSongs"
        />
        <!-- <div class="new-song-warp" v-for="(item,index) in songs" :key="index"> -->
        <!-- <NewSong :img="item.img" :name="item.name" :artist="item.artistsText" :index="index"
                :albumName="item.albumName" /> -->
        <SongTable :tableData="songs" />

        <!-- </div> -->
    </div>
</template>

<script>
import { getTopSongs } from '@/api'
import { createSong } from '@/utils'
import SongTable from '@/components/song-table.vue'
export default {
    components: {
        SongTable,
    },
    props: {},
    data() {
        return {
            activeTabIndex: 0,
            songs: [],
            tabs: [
                {
                    title: '全部',
                    type: 0,
                },
                {
                    title: '华语',
                    type: 7,
                },
                {
                    title: '欧美',
                    type: 96,
                },
                {
                    title: '日本',
                    type: 8,
                },
                {
                    title: '韩国',
                    type: 16,
                },
            ],
        }
    },
    watch: {},
    computed: {},
    methods: {
        async getSongs() {
            const { data } = await getTopSongs(
                this.tabs[this.activeTabIndex].type
            )
            this.songs = data.map((song) => {
                const {
                    id,
                    name,
                    artists,
                    duration,
                    mvid,
                    album: { picUrl, name: albumName },
                } = song
                return createSong({
                    id,
                    name,
                    artists,
                    duration,
                    albumName,
                    img: picUrl,
                    mvId: mvid,
                })
            })
        },
    },
    async created() {
        this.getSongs()
    },
    mounted() {},
}
</script>
<style lang="less" scoped></style>
